<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>v-for实例</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for实例</h1>
    <hr/>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in sortStudents">
                {{index+1}}:{{item.name}} - {{item.age}}
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                items:[53,121,11,100],
                students: [
                    {name: "Jspan", age: 33},
                    {name: "Panda", age: 28},
                    {name: "Panpan", age: 23},
                    {name: "King", age: 14},
                ]
            },
            computed: {
                sortItems: function(){
                    return this.items.sort(sortNum);
                },
                sortStudents: function(){
                    return sortByKey(this.students,"age")
                }
            }
        });

        function sortNum(a,b){
            return a-b;
        }
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x = a[key];
                var y = b[key];
                //return ((x<y)?-1:((x>y)?1:0));
                return x<y?-1:(x>y?1:0);
            });
        }
    </script>

</body>
</html>